import React,{useEffect} from 'react'
import { connect} from 'umi';
import db from '@/utils/localstorage';
import { Form, Select,Input,TimePicker, message } from 'antd';
const layout = {
    labelCol: { span: 3 },
    wrapperCol: { span: 10 },
  };
  const format = 'HH:mm';
const AddForm = props =>{
    const {dispatch,shopList} = props;
    const [form] = Form.useForm();
    useEffect(() => {
        if (dispatch) {
            dispatch({
                type: 'cubeSchedule/fetchShopList',
                payload:{
                  userId:db.get("user").userId
                }
              })
         }
       }, []);
     /**
   * 场馆变更
   * @param {*} value 
   */
  const venueChange = (value) =>{
    // dispatch({
    //   type: 'cubeSchedule/querySiteInfoListByVenueIdNotPage',
    //   payload: {
    //     id:value,
    //     usePurpose:4
    //   },
    // })
  }
    return  <Form
    {...layout}
    name="basic"
    form={form}
  >
    <Form.Item
      label="选择场馆"
      name="venueId"
      rules={[{ required: true, message: '请选择场馆' }]}
    >
      <Select style={{ width: '100%' }} placeholder="请选择" onChange={venueChange}>
          {
              shopList&&shopList.map((item,index)=> <Select.Option value={item.id} key={index}>{item.name}</Select.Option>)
          }
      </Select>
    </Form.Item>
    <Form.Item
      label="开课时间"
      name="time"
      rules={[{ required: true, message: '请选择开课时间' }]}
    >
      <TimePicker format={format} />
    </Form.Item>
  </Form>
}
export default connect(({ loading,cubeSchedule }) => ({
    shopList: cubeSchedule.shopList,
  }))(AddForm);